<template>
  <div>
    <h3 class="title">映射关系配置</h3>
    <div>
      <div class="add-btn">
        <el-button
          size="medium"
          type="primary"
          @click="handleAddScript"
        >添 加</el-button>
      </div>
      <el-table
        :key="updateTable"
        border
        style="width: 100%; margin-top: 15px"
        :height="300"
        :data="data.mapping"
      >
        <el-table-column prop="tableName" label="表名" />
        <el-table-column prop="column" label="字段名" />
        <el-table-column prop="rule" label="读入名称">
          <template slot-scope="scope">
            <span>{{ scope.row.readRule.rule }}</span>
          </template>
        </el-table-column>
        <el-table-column label="读入类型">
          <template slot-scope="scope">
            <span>{{ scope.row.readRule.ruleType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="读入脚本">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="
                scope.row.readRule.ruleType == 'DEFAULT' ||
                  scope.row.readRule.ruleContent.length == 0
              "
              @click="handleViewCode(scope.row, 'readRule')"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="rule" label="写入名称">
          <template slot-scope="scope">
            <span>{{ scope.row.writeRule.rule }}</span>
          </template>
        </el-table-column>
        <el-table-column label="写入类型">
          <template slot-scope="scope">
            <span>{{ scope.row.writeRule.ruleType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="写入脚本" prop="ruleContent">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="
                scope.row.writeRule.ruleType == 'DEFAULT' ||
                  scope.row.writeRule.ruleContent.length == 0
              "
              @click="handleViewCode(scope.row, 'writeRule')"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEditRules(scope.row, scope.$index)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              style="color: red"
              @click="handleRemoveRow(scope.row, scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :key="updateTable"
      title="groovy脚本"
      :visible.sync="dialogGroovyCodeVisible"
      width="80%"
    >
      <codeEditor
        ref="codeEditor"
        :key="updateTable"
        :editor-hight="500"
        :code-data="groovyCode"
        value-code-lang="groovy"
        :read-only="readOnly"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogGroovyCodeVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditCodeEnter">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="字段映射规则"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      append-to-body
    >
      <div class="script-box">
        <el-form
          ref="columnRules"
          :model="rulesForm"
          :rules="rules.columnRules"
          size="small"
          :inline="true"
          label-width="90px"
        >
          <el-form-item label="表名" prop="tableName">
            <el-select
              v-model="rulesForm.tableName"
              placeholder="请选择表名"
              @change="getColumnList"
            >
              <el-option
                v-for="item in data.jdbc"
                :key="item.tableName"
                :label="item.tableName"
                :value="item.tableName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="字段" prop="column">
            <el-select v-model="rulesForm.column" placeholder="请选择字段">
              <el-option
                v-for="item in cureentSelect"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-divider
          content-position="left"
        ><span class="dicider-title">源库-读入方式</span></el-divider>
        <el-form
          ref="readRuleRules"
          :model="rulesForm.readRule"
          :rules="rules.readRuleRules"
          size="small"
          :inline="true"
          label-width="90px"
        >
          <el-form-item label="规则类型" prop="ruleType">
            <el-select
              v-model="rulesForm.readRule.ruleType"
              placeholder="请选择规则类型"
            >
              <el-option
                v-for="item in dict.type.data_sync_column_ruletype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="规则脚本" prop="ruleContent">
            <el-button
              :disabled="rulesForm.readRule.ruleType == 'DEFAULT'"
              size="mini"
              type="primary"
              @click="handleEditCode('readRule')"
            >编辑规则脚本</el-button>
          </el-form-item>
          <el-form-item label="读入规则备注" label-width="120px">
            <el-input
              v-model="rulesForm.readRule.rule"
              placeholder="请填写读入规则备注"
            />
          </el-form-item>
        </el-form>
        <el-divider
          content-position="left"
        ><span class="dicider-title">目标库-写入方式</span></el-divider>
        <el-form
          ref="writeRuleRules"
          :model="rulesForm.writeRule"
          :rules="rules.writeRuleRules"
          size="small"
          :inline="true"
          label-width="90px"
        >
          <el-form-item label="规则类型" prop="ruleType">
            <el-select
              v-model="rulesForm.writeRule.ruleType"
              placeholder="请选择规则类型"
            >
              <el-option
                v-for="item in dict.type.data_sync_column_ruletype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="规则脚本" prop="ruleContent">
            <el-button
              :disabled="rulesForm.writeRule.ruleType == 'DEFAULT'"
              size="mini"
              type="primary"
              @click="handleEditCode('writeRule')"
            >编辑规则脚本</el-button>
          </el-form-item>
          <el-form-item label="写入规则备注" label-width="120px">
            <el-input
              v-model="rulesForm.readRule.rule"
              placeholder="请填写写入规则备注"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFieldMap">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import codeEditor from '@/components/CodeEditor/index.vue'
import Vue from 'vue'

export default {
  name: 'Mapping',
  components: { codeEditor },
  props: ['data'],
  dicts: ['data_sync_batch_type'],
  data() {
    return {
      dialogVisible: false,
      readOnly: false,
      dialogGroovyCodeVisible: false,
      cureentSelect: [],
      editIndex: null,
      rulesForm: null,
      updateTable: null,
      groovyCode: '',
      rules: {
        columnRules: {
          column: [{ required: true, message: '请选择字段', trigger: 'blur' }],
          tableName: [
            { required: true, message: '请选择表名', trigger: 'blur' }
          ]
        },
        readRuleRules: {
          rule: [
            { required: true, message: '请选择规则模板', trigger: 'blur' }
          ],
          ruleType: [
            { required: true, message: '请选择规则类型', trigger: 'blur' }
          ]
        },
        writeRuleRules: {
          rule: [
            { required: true, message: '请选择规则模板', trigger: 'blur' }
          ],
          ruleType: [
            { required: true, message: '请选择规则类型', trigger: 'blur' }
          ]
        }
      }
    }
  },
  created() {
    this.reset()
    if (!this.$props.data.mapping) {
      Vue.set(this.$props.data, 'mapping', [])
    }
  },
  methods: {
    addFieldMap() {
      if (this.editIndex != null) {
        this.$props.data.mapping[this.editIndex] = this.rulesForm
      } else {
        this.$props.data.mapping.push(this.rulesForm)
      }
      this.updateTable = Math.random()
      this.editIndex = null
      this.reset()
      this.dialogVisible = false
    },
    handleEditRules(row, index) {
      this.rulesForm = JSON.parse(JSON.stringify(row))
      this.editIndex = index
      this.dialogVisible = true
    },
    handleAddScript() {
      this.dialogVisible = true
    },
    handleViewCode(row, type) {
      this.readOnly = true
      this.dialogGroovyCodeVisible = true
      this.groovyCode = row[type].ruleContent
      this.updateTable = Math.random()
    },
    handleClose() {
      this.dialogVisible = false
      this.editIndex = null
      this.reset()
    },
    handleEditCodeEnter() {
      this.rulesForm[this.codekeyWord].ruleContent =
        this.$refs.codeEditor.$refs.aceEditor.editor.getValue()
      this.dialogGroovyCodeVisible = false
    },
    handleEditCode(value) {
      this.dialogGroovyCodeVisible = true
      this.codekeyWord = value
      this.readOnly = false
      this.groovyCode =
        this.rulesForm[value].ruleContent.length === 0
          ? ''
          : this.rulesForm[value].ruleContent
      this.updateTable = Math.random()
    },
    reset() {
      this.rulesForm = {
        column: '',
        readRule: {
          rule: '',
          ruleType: 'SCRIPT_GROOVY',
          ruleContent: ''
        },
        writeRule: {
          rule: '',
          ruleType: 'SCRIPT_GROOVY',
          ruleContent: ''
        }
      }
    },
    getColumnList(v) {
      const item = this.$props.data.jdbc.find((f) => f.tableName === v)
      this.cureentSelect = item.sortBySelectList
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}

.title {
  color: #333;
  font-size: 18px;
  line-height: 1.25;
  box-sizing: border-box;
  font-weight: 600;
  text-align: left;
  margin: 25px 0;
}

.dicider-title {
  font-size: 16px;
  color: #606266;
  font-weight: 600;
}

.script-box {
  border: 1px solid #ddd;
  padding: 15px 0px;

  .add-btn {
    margin: 10px 20px 0 20px;
    button {
      width: 110px;
    }
  }
}
</style>
